<template>
    <view class="container">
      <view class="edit-form">
        <input 
          class="input" 
          v-model="inputValue" 
          :type="inputType" 
          :placeholder="placeholder"
          :maxlength="maxLength"
        />
      </view>
      <view class="btn-area">
        <button class="save-btn" @click="saveChanges">保存</button>
      </view>
    </view>
  </template>
  
  <script>
  import storage from '../../utils/storage'
  import constant from '../../utils/constant'
  import { updateUserProfile } from '../../api/user.js'
  
  export default {
    data() {
      return {
        type: '',
        inputValue: '',
        originalValue: ''
      }
    },
    computed: {
      inputType() {
        const typeMap = {
          'phone': 'number',
          'email': 'text',
          'nickname': 'text'
        }
        return typeMap[this.type] || 'text'
      },
      placeholder() {
        const placeholderMap = {
          'phone': '请输入手机号',
          'email': '请输入邮箱',
          'nickname': '请输入昵称'
        }
        return placeholderMap[this.type] || '请输入'
      },
      maxLength() {
        const maxLengthMap = {
          'phone': 11,
          'email': 50,
          'nickname': 30
        }
        return maxLengthMap[this.type] || 50
      }
    },
    onLoad(options) {
      this.type = options.type || ''
      this.inputValue = options.value || ''
      this.originalValue = options.value || ''
      
      // 设置页面标题
      const titleMap = {
        'phone': '修改手机号',
        'email': '修改邮箱',
        'nickname': '修改昵称'
      }
      uni.setNavigationBarTitle({
        title: titleMap[this.type] || '编辑资料'
      })
    },
    methods: {
      // 验证输入
      validateInput() {
        if (!this.inputValue.trim()) {
          uni.showToast({
            title: '请输入内容',
            icon: 'none'
          })
          return false
        }
        
        if (this.type === 'phone') {
          if (!/^1[3-9]\d{9}$/.test(this.inputValue)) {
            uni.showToast({
              title: '请输入正确的手机号',
              icon: 'none'
            })
            return false
          }
        }
        
        if (this.type === 'email') {
          if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.inputValue)) {
            uni.showToast({
              title: '请输入正确的邮箱',
              icon: 'none'
            })
            return false
          }
        }
        
        return true
      },
      
      // 保存修改
      saveChanges() {
        if (!this.validateInput()) return
        
        if (this.inputValue === this.originalValue) {
          uni.navigateBack()
          return
        }
        
        const data = {}
        const keyMap = {
          'phone': 'phonenumber',
          'email': 'email',
          'nickname': 'nickName'
        }
        data[keyMap[this.type]] = this.inputValue
        
        uni.showLoading({
          title: '保存中...'
        })
        
        updateUserProfile(data).then(res => {
          if (res.code === 200) {
            // 更新本地存储
            if (this.type === 'nickname') {
              storage.set(constant.nickname, this.inputValue)
            }
            
            uni.showToast({
              title: '更新成功',
              icon: 'success'
            })
            
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } else {
            uni.showToast({
              title: res.msg || '更新失败',
              icon: 'none'
            })
          }
        }).catch(() => {
          uni.showToast({
            title: '更新失败',
            icon: 'none'
          })
        }).finally(() => {
          uni.hideLoading()
        })
      }
    }
  }
  </script>
  
  <style>
  .container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
  }
  
  .edit-form {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
  }
  
  .input {
    height: 88rpx;
    font-size: 28rpx;
    color: #333;
    padding: 0 20rpx;
  }
  
  .btn-area {
    margin-top: 40rpx;
    padding: 0 20rpx;
  }
  
  .save-btn {
    background-color: #007aff;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
  }
  
  .save-btn:active {
    opacity: 0.8;
  }
  </style>    
  <!-- line-height: 88rpx;
  }
  
  .save-btn:active {
    opacity: 0.8;
  }
  </style> -->
